Skip to content

Conversation

rachelks
Copy link
Member

@rachelks rachelks commented Oct 1, 2026

What this does

Adds the UI specification for #29 so reviewers can understand how the catalogue is intended to work before the client is connected to the backend.

What was done

docs/ui-specification.md includes:

  • six static example albums with the data the UI will display
  • interaction notes for search, genre/decade filtering, sorting and loading more results
  • the empty result state and facet-count behaviour
  • wireframes for the search/browse and album detail views
  • accessibility and responsive design considerations

The specification is also linked from docs/architecture.md so it is easy to find.

What was tested

Documentation only. Formatting checked with:

pnpm format

Closes #29.

@rachelks rachelks requested a review from a team as a code owner October 1, 2026 09:44
@rachelks rachelks linked an issue Oct 1, 2026 that may be closed by this pull request
5 tasks
Copy link
Member

@robertky robertky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we agreed to include decade filtering, could we add the corresponding input and facet type to this PR as well? That keeps the UI specification and GraphQL contract aligned.

Suggested addition to AlbumSearchInput:

decades: [Int!]

Each value represents the first year of a decade, for example 1990 for the 1990s. The search result should also expose decadeFacets, similar to genreFacets, so the UI can show match counts for each decade.

@rachelks
Copy link
Member Author

rachelks commented Oct 1, 2026

I agree, this is added now! The schema now includes decades and decadeFacets, and I updated the data model to match as well.

Copy link
Member

@robertky robertky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. The UI specification now covers the M1 requirements clearly, and the decade filter is consistently reflected in the GraphQL schema and data model. The wireframes, empty state, paging behaviour, and accessibility considerations make the planned user experience easy to understand.

@robertky robertky merged commit ddcee0c into main Oct 1, 2026
2 checks passed
@rachelks rachelks deleted the docs/29-ui-sketch branch October 15, 2026 08:29
Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI sketch for search, filters and detail view
2 participants